<template>
<!-- 简易的登录表单 -->
  <div class="simple_form_box">
      <!-- 登录表单域动态组件,用户名登录组件 或 手机验证码登录组件 -->
      <component :is="toggleFlag ? 'SimpleLoginPhone' : 'SimpleLoginBox'"/>
      <!-- 注册与找回密码页面跳转链接 -->
      <div class="login_serve">
          <a href="javascript:;">免费注册</a>
          <span>/</span>
          <a href="javascript:;">找回密码</a>
          <span>/</span>
          <a href="javascript:;" @click="toggle">{{toggleFlag ? '用户名登录方式' : '手机验证码登录方式'}}</a>
      </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import SimpleLoginBox from './SimpleLoginBox.vue'
import SimpleLoginPhone from './SimpleLoginPhone.vue'
export default {
    name:'SimpleLoginForm',
    components:{
        SimpleLoginBox,
        SimpleLoginPhone
    },
    setup() {
        //用于切换登录方式
        let toggleFlag = ref(false)

        //切换登录方式
        function toggle() {
            toggleFlag.value = !toggleFlag.value
        }

        return {
            toggleFlag,
            toggle
        }
    }
}
</script>

<style lang="css"> 
/* 初始化样式 */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html {
    font-size: 12px;
}
/* 登录表单最外层盒子 */
.simple_form_box {
    position: relative;
    overflow: hidden;
    margin: 150px auto;
    width: 500px;
    height: 300px;
    box-shadow:  1px 1px 5px -3px #000;
    background-color: rgb(255, 255, 255);
}

/* 注册与找回密码页面跳转链接  */
.simple_form_box .login_serve {
    position: absolute;
    float: left;
    bottom: 10px;
    left: 15px;
    cursor: pointer;
}
.simple_form_box .login_serve span {
    color: rgb(0, 108, 250);
}
.simple_form_box .login_serve a {
    color: rgb(138, 187, 252);
}
.simple_form_box .login_serve a:hover {
    color: rgb(0, 108, 250);
}
</style>